<template>
  <!--弹窗-->
  <el-dialog :title="title" :visible.sync="visible" :before-close="handleClose" width="500px">
    <el-form :rules="rules" ref="formData" :model="formData" label-width="100px" style="width: 400px;" status-icon>
      <el-form-item label="类型：" prop="type">
        <el-radio-group v-model="formData.type">
          <el-radio :label="1">目录</el-radio>
          <el-radio :label="2">菜单</el-radio>
        <!--   <el-radio :label="3">按钮</el-radio>-->
          <!-- 如果 formData.parentId=0 是根菜单，就不显示按钮，注意是数字0，不是字符串没有引号 -->
          <el-radio :label="3" v-if="formData.parentId !== 0">按钮</el-radio>
        </el-radio-group>
      </el-form-item>
      <!-- 按钮：不要显示 请求地址url、 图标icon , 在按钮上对应的写明就行，所以不需要-->
      <el-form-item label="名称：" prop="name">
        <el-input v-model="formData.name"></el-input>
      </el-form-item>
      <el-form-item label="权限标识：" prop="code">
        <el-input v-model="formData.code"></el-input>
      </el-form-item>
      <el-form-item label="请求地址：" prop="url" v-if="formData.type != 3">
        <el-input v-model="formData.url"></el-input>
      </el-form-item>
      <el-form-item label="图标：" prop="icon" v-if="formData.type != 3">
        <el-input v-model="formData.icon"></el-input>
      </el-form-item>
      <el-form-item label="排序：" prop="sort">
        <el-input-number v-model="formData.sort" :min="1" :max="10000" />
      </el-form-item>
      <el-form-item label="备注：" prop="remark">
        <el-input v-model="formData.remark" type="textarea" :autosize="{ minRows:
2, maxRows: 4}" placeholder="请输入内容">
        </el-input>
      </el-form-item>
      <el-form-item align="right">
        <el-button size="mini" @click="handleClose">取 消</el-button>
        <el-button size="mini" type="primary" @click="submitForm('formData')">确 定
        </el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script>
  import api from '@/api/menu'
import { valid } from 'mockjs'
  export default {
    // 接收父组件传递的属性

    // 接收父组件传递的属性
    props: {
      visible: { //弹出隐藏
        type: Boolean,
        default: false
      },
      title: { // 标题
        type: String,
        default: ''
      },
      formData: { // 表单数据
        type: Object,
        default: {}
      },
      remoteClose: Function // 用于关闭窗口
    },
      data() {
            return {
                rules: {
                    type: [ // prop值
                        {required: true, message: '请选择类型', trigger: 'change'},
                    ],
                    name: [ // prop值
                        {required: true, message: '请输入菜单名称', trigger: 'blur'},
                    ],
                    code: [ // prop值
                        {required: true, message: '请输入权限标识', trigger: 'blur'},
                    ],
                }
            }
        },

    methods: {
      // 关闭弹窗
      handleClose(done) {
        this.$refs['formData'].resetFields()
        this.remoteClose()

      },
      //提交表单
      submitForm(formName) {
        this.$refs[formName].validate((valid) =>{
          if(valid){
            if(this.formData.type == 3){
              this.formData.url = ""
              this.formData.icon = ""
            }
            this.submitData()
          }else{
            return false;
          }
        })

      },
      async submitData(){
       // let response = await api.add(this.formData)
       let response = null
       if(this.formData.id){
         response = await api.update(this.formData)
       }else{
         response = await api.add(this.formData)
       }
        if(response.code === 20000){
          this.$message({
            message:'保存成功',
            type:'success'
          })
          this.handleClose()
        }else{
          this.$message({
            type:'error',
            message:'保存失败'
          });
        }
      }
    }
  }
</script>

<style>
</style>
